<template>
	<view>
		<view class="nav">
			<text class="title-nav">香哈菜谱大全</text>
			<view>小白做菜必备烹饪助手</view>
			
			<u-search @custom="searcher"   showAction="false" inputAlign="center" height="70" animation placeholder="共有85262道菜"></u-search>
		</view>
		  <u-notice-bar text="今日会员2折,心动不如心动,点击购买" @click="backvip" @close="closeme" mode="closable" ></u-notice-bar>
		<view style="width: 680rpx;" class="swipers">
				<swiper-items :list1="list1"></swiper-items>
		</view>
		<view class="eight-type">
				<view v-for="type in eightTypeData" :key="type.name" class="type-one" @tap="searcher(type.name)">
					<image :src="type.image_src"></image>
					<view>{{type.name}}</view>
				</view>
		</view>
		<view class="three">
			<view >
					<swiper-items :list1="swiperTwoData"></swiper-items> 
					<text>{{threeFloorData[0].floor_title.slice(1,6)}}</text>
			</view>
			<view class="three-two">
				<view>
					<image :src="threeFloorData[1].floor_imgs" ></image>
					<text>{{threeFloorData[1].floor_title.slice(1,6)}}</text>
				</view>
				<view>
					<image :src="threeFloorData[2].floor_imgs" ></image>
					<text>{{threeFloorData[2].floor_title.slice(1,6)}}</text>
				</view>
			</view>
		</view>
		<view class="section">
				<view class="section-item" v-for="item in productData" :key="item._id" v-if="item.coverpic">
						<foodone :item="item" @tap="getDetail(item._id)"></foodone>
				</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				eightTypeData:[],
				swiperTwoData:[],
				threeFloorData:[],
				productData:[]
			}
		},
		onLoad() {
			this.getSwiper()
			this.getHomeType()
			this.getThreeFloors()
			this.getProducts()
		},
		methods: {
			backvip(){
				uni.navigateTo({
					url:"../openVip/openVip"
				})
			},
			closeme(){
				uni.showModal({
				    title: '提示',
				    content: '买买买！2折啊！想什么呢！',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				            	url:"../openVip/openVip"
				            })
				        } else if (res.cancel) {
				           uni.showModal({
							   title:"提示",
							   content:"你真的确定不买？",
							   success(ress) {
								if(ress.confirm){
									uni.showModal({
									    title: '提示',
									    content: '中国人不骗中国人真不买吗？',
										success() {
											uni.showToast({
											    title: '真扣，让你等会',
											    duration: 7000,
												icon:"loading"
											});
										}
										
									});
								}else if(ress.cancel){
									uni.navigateTo({
										url:"../openVip/openVip"
									})
								}
								 
							   }
						   })
				        }
				    }
				});
			},
			getDetail(id){
				console.log(id);
				uni.navigateTo({
					url:"../datail/datail?_id="+id
				})
			},
			async getSwiper(){
					const data=await this.$api.index.getSwiper()
						data.message.forEach(item=>{
								this.list1.push(item.image_src)
						})
					
			},
			async getHomeType(){
						const data=await this.$api.index.getType()
						this.eightTypeData=data.message
			},async getThreeFloors(){
						const data=await this.$api.index.getThreeFloor()
						this.threeFloorData=data.message
						this.swiperTwoData=data.message[0].floor_imgs
					
			},async getProducts(){
						const data=await this.$api.index.getProduct()
							this.productData=data.message
					
			},
			searcher(value){
				if(value!="分类"){
					uni.navigateTo({
						url:"../search/search?val="+value
					})
				}else{
					uni.navigateTo({
						url:"../type/type"
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		background-color: #007AFF;
		height: 100rpx;
		padding: 40rpx;
		margin-bottom: 50rpx;
		background-image: url("../../static/images/mengbanzu250.png");

		.title-nav {
			color: white;
			font-size: 35rpx;
		}

		view {
			color: white;
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}

	}
.swipers{
	margin: 0 auto;
	margin-top: 10rpx;
	
}
.eight-type{
	width: 680rpx;
	height: 290rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30rpx;
	.type-one{
		height: 150rpx;
		width: 130rpx;
		text-align: center;
		font-size: 27rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	
}
.three{
	width: 680rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	>view{
		width: 320rpx;
		position: relative;
		text{
			position: absolute;
			left: 14rpx;
			top: 10rpx;
			color: white;
			background-color: #fe5400;
		}
	
	
	}
	.three-two{
		width: 340rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		>view{
			height: 46%;
			position: relative;
			
			image{
				width: 100%;
				height: 100%;
			}
			text{
				position: absolute;
				left: 14rpx;
				top: 10rpx;
				color: white;
			}
			
		}
	}
	
	
}
.section{
	width: 680rpx;
	margin: 30rpx auto 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	
	>.section-item{
		width: 320rpx;
		height: 400rpx;
		
	}
}
</style>
